একটি ভ্যারিয়েবলের মধ্যে অনেক ভ্যালু রাখার জন্য অ্যারে ব্যবহার করা হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
document.getElementById("test").innerHTML = animals;
</script>
</body>
</html>
অ্যারে একটি বিশেষ ভ্যারিয়েবল যা একসঙ্গে একাধিক মান ধারণ করতে পারে।
আপনার কাছে যদি একাধিক ভ্যালুর একটি লিস্ট থাকে(উদাহরণস্বরুপঃ স্যাট মেম্বারদের নামের লিস্ট) তাহলে সেগুলোকে আলাদা আলাদা ভ্যারিয়েবলের মধ্যে রাখলে নিচের মত দেখাবেঃ
var satt1 = "Azizur";
var satt2 = "Shapla";
var satt3 = "Tamim";
var satt4 = "Tahmid";
আপনার কাছে যদি ৩০০ মেম্বারের লিস্ট থাকে এবং লুপের মাধ্যমে একজন মেম্বারকে পেতে চান!
এর সমাধান হচ্ছে অ্যারে।
অ্যারে একই নামের অধীনে অনেক ভ্যালু রাখতে পারে এবং আপনি ইন্ডেক্স নম্বর ব্যবহার করে ভ্যালু এক্সেস করতে পারেন।
অ্যারে লিটারাল ব্যবহার জাভাস্ক্রিপ্ট অ্যারে তৈরি করার সবচেয়ে সহজ উপায়।
সিন্টেক্সঃ
var array-name = [item1, item2, ...];
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
document.getElementById("test").innerHTML = animals;
</script>
</body>
</html>
অ্যারে ডিক্লেয়ারেশন একাধিক লাইনেও করা যায়ঃ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p id="test"></p>
<script>
var animals = [
"Lion",
"Tiger",
"Horse",
"Hen"
];
document.getElementById("test").innerHTML = animals;
</script>
</body>
</html>
শেষের এলিমেন্টের পরে কখনো কমা ব্যবহার করবেন না (যেমনঃ "Hen",) ।
নিম্নলিখিত উদাহরণেও একটি অ্যারে তৈরি করা হয়েছেঃ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p id="test"></p>
<script>
var animals = new Array("Lion", "Tiger", "Horse", "Hen");
document.getElementById("test").innerHTML = animals;
</script>
</body>
</html>
উপরে দুটি উদাহরণ একই কাজ করে। এখানে new array() ব্যবহার করার প্রয়োজন নেই।
সহজ, পাঠযোগ্যতা এবং এক্সিকিউশন গতির জন্য প্রথম পদ্ধতিটি ব্যবহার করুন।
আপনি ইন্ডেক্স নম্বর উল্লেখ করার মাধ্যমে একটি অ্যারে এলিমেন্ট নির্দেশ করতে পারেন। নিচের স্টেটমেন্টে satt অ্যারের তৃতীয় এলিমেন্টকে এক্সেস করা হয়েছেঃ
var name = animals[2];
এই স্টেটমেন্টে তৃতীয় এলিমেন্টকে পরিবর্তন করা হয়েছেঃ
animals[2] = "Elephant";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
document.getElementById("test").innerHTML = animals[1];
</script>
</body>
</html>
একটি অ্যারের প্রথম এলিমেন্ট হচ্ছে [0], দ্বিতীয়টি হচ্ছে [1]। অ্যারের ইনডেক্স ০ দিয়ে শুরু হয়।
জাভাস্ক্রিপ্টে সম্পূর্ন অ্যারেকে এক্সেস করার জন্য শুধুমাত্র অ্যারের নাম লিখতে হয়ঃ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
document.getElementById("test").innerHTML = animals;
</script>
</body>
</html>
অ্যারে স্পেশাল টাইপের অবজেক্ট। জাভাস্ক্রিপ্টের typeof অপারেটর অ্যারের ক্ষেত্রে object রিটার্ন করে।
কিন্তু, জাভাস্ক্রিপ্ট অ্যারেকে অ্যারে হিসেবে সবচেয়ে ভালো বর্ণনা করা যায়।
অ্যারে সংখ্যা ব্যবহার করে তার এলিমেন্টকে এক্সেস করে। এই উদাহরণে animals[1] দ্বারা অ্যারেকে এক্সেস করলে Tiger রিটার্ন করেঃ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
document.getElementById("test").innerHTML = animals[1];
</script>
</body>
</html>অবজেক্ট তার মেম্বারকে এক্সেস করার জন্য নাম ব্যবহার করে। এই উদাহরনে, member.firstName দ্বারা অবজেক্টকে এক্সেস করলে 'আজিজুর' রিটার্ন করেঃ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h2>জাভাস্ক্রিপ্ট অবজেক্ট</h2>
<p>জাভাস্ক্রিপ্ট অবজেক্ট প্রোপার্টি অ্যাক্সেস করতে নাম ব্যবহার করে। </p>
<p id="test"></p>
<script>
var member = {firstName:"আজিজুর", lastName:"রহমান", age:32};
document.getElementById("test").innerHTML = member["firstName"];
</script>
</body>
</html>
জাভাস্ক্রিপ্ট ভ্যারিয়েবল অবজেক্ট হতে পারে। অ্যারে হচ্ছে স্পেশাল টাইপের অবজেক্ট।
এই কারনে, বিভিন্ন ধরনের ভ্যারিয়েবলকে একই অ্যারেতে রাখা যায়।
একটি অ্যারেতে আপনি অবজেক্ট, ফাংশন এবং অন্য একটি অ্যারেও রাখতে পারেনঃ
myArray[0] = Date.now;
myArray[1] = myFunc;
myArray[2] = mysatt;
জাভাস্ক্রিপ্ট অ্যারের সবচেয়ে শক্তিশালী দিক হচ্ছে এর বিল্ট-ইন প্রোপার্টি এবং মেথডঃ
var a = satt.length; // এলিমেন্টের সংখ্যা রিটার্ন করে
var b = satt.sort(); // sort() মেথড অ্যারেকে শ্রেণীবদ্ধ করে
অ্যারে মেথড সম্পর্কে পরবর্তী পরিচ্ছেদে আরো ভালোভাবে আলোচনা করা হয়েছে।
length প্রোপার্টি একটি অ্যারের এলিমেন্টের সংখ্যা রিটার্ন করে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h2>জাভাস্ক্রিপ্ট অ্যারে</h2>
<p> length প্রোপার্টি একটি অ্যাারের length রিটার্ন করে। </p>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
document.getElementById("test").innerHTML = animals.length;
</script>
</body>
</html>
অ্যারেতে নতুন এলিমেন্ট যোগ করার সবচেয়ে সহজ পদ্ধতি হচ্ছে push মেথড ব্যবহার করাঃ
kt_satt_skill_example_id=895
length প্রোপার্টিও ব্যবহার করে অ্যারে তে নতুন প্রোপার্টি যোগ করা যায়ঃ
kt_satt_skill_example_id=896
kt_satt_skill_example_id=898
অ্যারে এলিমেন্টের মধ্যে লুপ করার জন্য একটি সবচেয়ে ভালো পদ্ধতি হচ্ছে "for" লুপ ব্যবহার করাঃ
kt_satt_skill_example_id=899
অ্যারের ইনডেক্সিং নাম দিয়ে অনেক প্রোগ্রামিং ল্যাংগুয়েজে সাপোর্ট করে।
যেসকল অ্যারের ইনডেক্স নাম দিয়ে করা হয় তাদেরকে অ্যাসোসিয়েটিভ অ্যারে বলে।
জাভাস্ক্রিপ্টে এটা সাপোর্ট করে না।
জাভাস্ক্রিপ্টে, অ্যারে সবসময় নম্বর ইনডেক্স ব্যবহার করে।
kt_satt_skill_example_id=900
সতর্কবাণী!!!
আপনি যদি ইনডেক্সিং-এ নাম ব্যবহার করেন জাভাস্ক্রিপ্ট অ্যারেকে স্ট্যান্ডার্ড অবজেক্ট হিসেবে পুনরায় ডিফাইন করে। তখন সকল অ্যারে মেথড এবং প্রোপার্টি ভুল ফলাফল দেখায়।
kt_satt_skill_example_id=901
জাভাস্ক্রিপ্টে, অ্যারে নম্বর ইনডেক্স ব্যবহার করে।
জাভাস্ক্রিপ্টে, অবজেক্ট নাম ইনডেক্স ব্যবহার করে।
অ্যারে হচ্ছে একটি স্পেশাল অবজেক্ট যা নম্বর ইনডেক্স ব্যবহার করে।
এখানে জাভাস্ক্রিপ্টের বিল্ট-ইন অ্যারে কনস্ট্রাক্টর new Array() প্রয়োজন নেই।
এর পরিবর্তে [] ব্যবহার করুন।
এই দুইটি ভিন্ন স্টেটমেন্টই points নামের নতুন অ্যারে তৈরি করেছেঃ
kt_satt_skill_example_id=902
এই দুইটি ভিন্ন স্টেটমেন্টই ৬ সংখ্যার একটি নতুন অ্যারে তৈরি করেঃ
kt_satt_skill_example_id=903
new কিওয়ার্ড কোডকে জটিল করে তুলে। এটি অপ্রত্যাশিত ফলাফল দেখাতে পারেঃ
kt_satt_skill_example_id=904
যদি একটি এলিমেন্ট বাদ দেই?
kt_satt_skill_example_id=906
একটি সাধারণ প্রশ্ন হলোঃ একটি ভ্যারিয়েবল অ্যারে কিনা কিভাবে বুঝবো?
সমস্যা হচ্ছে জাভাস্ক্রিপ্টের typeof অপারেটর "object" রিটার্ন করেঃ
kt_satt_skill_example_id=907
typeof অপারেটর অবজেক্ট রিটার্ন করে কারন জাভাস্ক্রিপ্ট অ্যারে একটি অবজেক্ট।
এই সমস্যা দূর করার জন্য ECMAScript 5 একটি নতুন মেথড Array.isArray() নির্ধারন করেঃ
kt_satt_skill_example_id=909
এই সমাধানের একটি সমস্যা রয়েছে, পুরাতন ব্রাউজারে ECMAScript 5 সাপোর্ট করে না।
এই সমস্যা দূর করার জন্য আপনি একটি isArray() ফাংশন তৈরি করে নিতে পারেনঃ
kt_satt_skill_example_id=911
যদি আর্গুমেন্ট একটি অ্যারে হয় তাহলে উপরের ফাংশনটি সব সময় true রিটার্ন করবে।
যদি একটি অবজেক্ট কনস্ট্রাক্টরের মাধ্যমে তৈরি হয় তাহলে instanceof অপারেটর true রিটার্ন করেঃ
kt_satt_skill_example_id=912
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
